import React, { Component } from 'react';
import PropTypes from 'prop-types';
import { Modal, Input, Radio } from 'antd';
import { PORT_RE } from '@util/constants';
import './index.less';

const prefixCls = 'vulnerability-modal';

const inputPlaceholder = {
  port: '请输入一个端口名称，例如：“80”',
  component: '请输入一个组件名称，例如：“Firewall”',
  service: '请输入一项服务名称，例如：“ssl”'
};

class VulnerabilityModal extends Component {
  static defaultState = {
    name: '',
    type: 'port',
    nameError: '',
    isEdit: false,
    id: ''
  };
  constructor(props) {
    super(props);
    this.state = {
      ...VulnerabilityModal.defaultState
    };
  }
  // eslint-disable-next-line
  UNSAFE_componentWillReceiveProps(props) {
    if (props.modalVisible) {
      const { type = 'port', name = '', _id = '' } = props.rowData;
      const isEdit = !name;
      this.setState({ name, type, isEdit, id: _id, nameError: '' });
    }
  }

  onClickSubmit = () => {
    if (this.checkName()) {
      return;
    }
    const { name, type, id, isEdit } = this.state;
    const { onClickSubmit } = this.props;
    let body = { name: name.trim(), type };
    if (isEdit) {
      onClickSubmit('add', body);
    } else {
      body['vulner_id'] = id;
      onClickSubmit('edit', body);
    }
  };

  onRadioChange = e => {
    if (!this.state.name) {
      this.setState({ type: e.target.value });
      return;
    }
    this.setState({ type: e.target.value }, this.checkName);
  };

  onNameChange = e => {
    this.setState({ name: e.target.value }, this.checkName);
  };

  checkName = () => {
    const { name, type } = this.state;
    let nameError = '';
    let RE = type === 'port' ? PORT_RE : /^(?!\d+$)[\da-zA-Z\s-]+$/;
    if (!RE.test(name)) {
      nameError = '您输入的格式有误';
    }
    if (!name) {
      nameError = '名称不能为空';
    }
    this.setState({ nameError });
    return nameError;
  };

  render() {
    const { modalVisible = false, closeModal, confirmLoading } = this.props;
    const { name, type, nameError, isEdit } = this.state;
    return (
      <Modal
        maskClosable={false}
        title={isEdit ? '添加名单' : '编辑名单'}
        className={prefixCls}
        visible={modalVisible}
        onOk={this.onClickSubmit}
        onCancel={closeModal}
        confirmLoading={confirmLoading}
      >
        <div className={`${prefixCls}-item type`}>
          <div className={`${prefixCls}-item-title`}>类型</div>
          <div className={`${prefixCls}-item-content`}>
            <Radio.Group onChange={this.onRadioChange} value={type} disabled={!isEdit}>
              <Radio value={'port'}>端口</Radio>
              <Radio value={'component'}>组件</Radio>
              <Radio value={'service'}>服务</Radio>
            </Radio.Group>
          </div>
        </div>
        <div className={`${prefixCls}-item`}>
          <div className={`${prefixCls}-item-title`}>名称</div>
          <div className={`${prefixCls}-item-content`}>
            <Input placeholder={inputPlaceholder[type]} value={name} onChange={this.onNameChange} />
            {nameError && <span className={`${prefixCls}-item-error`}>{nameError}</span>}
          </div>
        </div>
      </Modal>
    );
  }
}

VulnerabilityModal.propTypes = {
  modalVisible: PropTypes.bool,
  confirmLoading: PropTypes.bool,
  onClickSubmit: PropTypes.func,
  closeModal: PropTypes.func,
  rowData: PropTypes.object
};

export default VulnerabilityModal;
